<template>
  <div class="payment-method">
    <!-- 确认支付弹出层 -->
    <van-row class="isPay">
      <van-col span="24" class="title"> <p>请确认是否已完成支付。</p></van-col>
      <van-col span="12" class="ispay_button"> <van-button type="default" @click="continuePayment">继续支付</van-button></van-col>
      <van-col span="12" class="ispay_button"><van-button type="primary" @click="completePayment">完成支付</van-button></van-col>
    </van-row>
    <!-- 加载弹出层 -->
    <van-overlay :show="isLoading">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      payNo: '',
      isLoading: false,
      type: '',
    };
  },
  mounted() {
    this.payNo = this.$route.query.payNo;
    this.type = this.$route.query.type;
  },
  methods: {
    //继续支付
    continuePayment() {
      this.$router.go(-1);
    },
    //完成支付
    completePayment() {
      //调用手动查询支付结果的方法
      this.getPayResult();
    },
    //查询支付结果
    getPayResult() {
      this.isLoading = true;
      this.req
        .get('/order/payresult', { params: { payNo: this.payNo } })
        .then((res) => {
          if (res.status == 400) {
            this.$notify({
              type: 'danger',
              message: res.msg,
            });
          }
          if (res.status == 200) {
            //支付成功
            if (this.type == 'buy') this.$router.push({ path: '/order', query: { status: 1 } });
            else if (this.type == 'exchange') this.$router.push({ path: '/user' });
            this.$notify({
              type: 'success',
              message: res.msg,
            });
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
//确认支付对话框样式
.payment-method {
  background-color: #aaa;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .isPay {
    margin-top: 150px;
    background-color: #fff;
    padding: 20px;
    width: 70%;
    border-radius: 20px;
    .title {
      margin: 20px 0;
      text-align: center;
    }
    .ispay_button {
      display: flex;
      .van-button {
        width: 120px;
      }
    }
  }
}
// 弹出层样式
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
